<template>
	<div class="online-exam">
		<div class="header">
			<div class="webheart">
				<div class="crumb">
					<dl>
						<dt>在线考试</dt>
						<dd>ZAIXIANKAOSHI</dd>
					</dl>
					<p>
						<router-link to="/index">首页</router-link>
						<strong>/</strong>
						<span>在线考试</span>
					</p>
				</div>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.online-exam::v-deep {
	.header {
		position: relative;
		padding-top: 115px;
		overflow: hidden;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 150px;
			content: '';
			background: url('~@/assets/users/bg01.png') no-repeat center;
			background-size: cover;
		}

		.webheart {
			display: flex;
			position: relative;
			height: 70px;
			&::before {
				position: absolute;
				content: '';
				left: -48vw;
				bottom: 0;
				width: 50vw;
				height: 70px;
				z-index: 1;
				background-color: #0659a7;
			}
			.crumb {
				display: flex;
				align-items: center;
				padding-right: 70px;
				border-bottom: 70px solid #0659a7;
				border-right: 70px solid transparent;
				color: #fff;
				position: relative;
				z-index: 2;
				dl {
					margin-top: 70px;
					padding-right: 10px;
					border-right: solid 1px #fff;
				}
				dt {
					font-size: 24px;
					font-weight: bold;
				}
				p {
					margin-top: 70px;
					margin-left: 16px;
					a {
						color: #fff;
						font-weight: bold;
					}
					strong {
						margin: 0 6px;
					}
				}
			}
		}
	}
}
</style>
